<template>
	<view>
		<!--  :longitude="longitude" :latitude="latitude" -->
		<view class="page-wrap">
			<map class="map" :longitude="longitude" :latitude="latitude" :scale="9" :markers="covers"
				:circles="circles" :enable-rotate='true' :polygons='polygons'></map>
		</view>
		<view class="location-name u-flex u-row-center">
			<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-location1.png" mode="widthFix">
			</image>
			{{address}}
		</view>
		<view class="wrap">
			<view class="u-font-34 green blod">
				江西省鹰潭市潢溪镇数字农业示范区
			</view>
			<view class="desc u-m-t-30">
				红糖产地坐落于江西省鹰潭市潢溪镇，种植区域内部署数字化
				设备10余台，监测数据实时上传潢溪镇人民政府及松浦科技为
				甘蔗种植提供更优的种植方案
			</view>
			<view class="u-flex u-row-between u-m-t-50">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img1.png" mode="widthFix">
				</image>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img2.png" mode="widthFix">
				</image>
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img3.png" mode="widthFix">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import mapJson from './map.json'

	export default {
		components: {},
		data() {
			return {
				mapJson: mapJson,
				longitude: '115.98',
				latitude: '28.39',
				address: '',
				covers: [{
					id: 1,
					latitude: 28.39,
					longitude: 115.98,
					iconPath: 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-location2.png',
					width: 32,
					height: 32
				}],
				circles: [{
						latitude: 28.39,
						longitude: 115.98,
						fillColor: '#07C16050',
						radius: 70,
						color: '#07C16000'
					},
					{
						latitude: 28.39,
						longitude: 115.98,
						fillColor: '#07C16020',
						radius: 300,
						color: '#07C16000'
					}
				],
				polygons: [{
					points: [
						{
						    longitude:117.05602925,
						    latitude:28.60847127
						},
						{
						    longitude:117.05612544,
						    latitude:28.60845314
						},
						{
						    longitude:117.05620631,
						    latitude:28.60845776
						},
					],
					strokeWidth: 2,
					strokeColor: 'rgba(90, 165, 234,1)',
					fillColor: 'rgba(90, 165, 234,0.3)'
				}]
			}
		},
		onReady() {

		},
		onLoad(option) {
			// console.log(mapJson.features[0].geometry.coordinates[0][0], '000');
			this.polygons[0].points = mapJson.features[0].geometry.coordinates[0][0].map(item => {
				return {
				    latitude: item[1],
				    longitude: item[0]
				  };
			})

			if (JSON.parse(option.data)) {
				let {
					lat,
					lon,
					title
				} = JSON.parse(option.data);
				this.latitude = lat;
				this.longitude = lon;
				this.address = title;

				this.covers[0].latitude = lat;
				this.covers[0].longitude = lon;

				this.circles.forEach(el => {
					el.latitude = lat;
					el.longitude = lon
				})
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.page-wrap {
		position: relative;
		z-index: 2;
	}

	.wrap {
		position: relative;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		background-color: #fff;
		padding: 60rpx 40rpx;
		overflow: hidden;
		margin-top: -50rpx;
		z-index: 9;

		image {

			width: 212rpx;
			height: 278rpx;
		}
	}

	.map {
		width: 750rpx;
		height: 764rpx;
	}

	.location-name {
		position: fixed;
		z-index: 999;
		top: 30rpx;
		left: 30rpx;
		width: 130rpx;
		height: 50rpx;
		background: #07C160;
		border-radius: 25rpx;
		font-size: 24rpx;
		color: #fff;

		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 6rpx;
		}
	}

	.desc {
		font-size: 24rpx;
		color: #666;
		line-height: 40rpx;
	}
</style>
<style>
	page {
		padding: 0;
		background-color: #fff;
	}
</style>